<template>
  <div class="life-view">
    <!-- 头部横幅 -->
    <div class="life-header">
      <div class="header-bg">
        <img src="../assets/科技数码展宣传图.jpg" alt="生活专题" class="header-image">
        <div class="header-overlay"></div>
      </div>
      <div class="header-content">
        <h1 class="header-title">品质生活</h1>
        <p class="header-subtitle">发现生活之美，享受精彩人生</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="life-content">
      <!-- 内容分类标签 -->
      <div class="category-tabs">
        <button 
          v-for="tab in lifeCategories" 
          :key="tab.key"
          class="category-tab"
          :class="{ active: activeCategory === tab.key }"
          @click="switchCategory(tab.key)"
        >
          <i :class="tab.icon"></i>
          <span>{{ tab.name }}</span>
        </button>
      </div>

      <!-- 精选内容区域 -->
      <div class="featured-content">
        <div 
          v-for="(featured, index) in featuredContents" 
          :key="featured.id"
          class="featured-item"
          :class="{ 'primary': index === 0 }"
          @click="viewContent(featured)"
        >
          <div class="featured-image-container">
            <img :src="featured.image" alt="{{ featured.title }}" class="featured-image">
            <div class="featured-tag">{{ featured.category }}</div>
          </div>
          <div class="featured-info">
            <h2 class="featured-title">{{ featured.title }}</h2>
            <p class="featured-description">{{ featured.description }}</p>
            <div class="featured-meta">
              <span class="featured-date">{{ featured.date }}</span>
              <span class="featured-views"><i class="fa fa-eye"></i> {{ formatNumber(featured.views) }}</span>
              <span class="featured-likes"><i class="fa fa-heart"></i> {{ formatNumber(featured.likes) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 分类内容区域 -->
      <div class="category-content">
        <!-- 生活技巧内容 -->
        <div v-if="activeCategory === 'skills'" class="skills-content">
          <div class="section-header">
            <h2 class="section-title">💡 实用生活技巧</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <div class="skills-grid">
            <div 
              v-for="skill in lifeSkills" 
              :key="skill.id"
              class="skill-card"
              @click="viewSkill(skill)"
            >
              <div class="skill-icon">
                <i :class="skill.icon"></i>
              </div>
              <div class="skill-info">
                <h3 class="skill-title">{{ skill.title }}</h3>
                <p class="skill-brief">{{ skill.brief }}</p>
                <span class="skill-read-more">阅读全文 <i class="fa fa-long-arrow-right"></i></span>
              </div>
            </div>
          </div>
        </div>

        <!-- 美食推荐内容 -->
        <div v-if="activeCategory === 'food'" class="food-content">
          <div class="section-header">
            <h2 class="section-title">🍔 美食推荐</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <div class="food-grid">
            <div 
              v-for="food in foodRecommendations" 
              :key="food.id"
              class="food-card"
              @click="viewFood(food)"
            >
              <div class="food-image-container">
                <img :src="food.image" alt="{{ food.name }}" class="food-image">
                <div class="food-tags">
                  <span v-for="tag in food.tags" :key="tag" class="food-tag">{{ tag }}</span>
                </div>
              </div>
              <div class="food-info">
                <h3 class="food-name">{{ food.name }}</h3>
                <div class="food-meta">
                  <span class="food-location"><i class="fa fa-map-marker"></i> {{ food.location }}</span>
                  <span class="food-price"><i class="fa fa-yen"></i> {{ food.price }}</span>
                  <span class="food-rating"><i class="fa fa-star"></i> {{ food.rating }}</span>
                </div>
                <p class="food-description">{{ food.description }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 旅行攻略内容 -->
        <div v-if="activeCategory === 'travel'" class="travel-content">
          <div class="section-header">
            <h2 class="section-title">✈️ 旅行攻略</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <div class="travel-grid">
            <div 
              v-for="travel in travelGuides" 
              :key="travel.id"
              class="travel-card"
              @click="viewTravel(travel)"
            >
              <div class="travel-image-container">
                <img :src="travel.image" alt="{{ travel.destination }}" class="travel-image">
              </div>
              <div class="travel-info">
                <h3 class="travel-destination">{{ travel.destination }}</h3>
                <div class="travel-meta">
                  <span class="travel-duration"><i class="fa fa-clock-o"></i> {{ travel.duration }}</span>
                  <span class="travel-cost"><i class="fa fa-yen"></i> {{ travel.cost }}</span>
                </div>
                <p class="travel-description">{{ travel.description }}</p>
                <div class="travel-highlights">
                  <span v-for="highlight in travel.highlights" :key="highlight" class="travel-highlight">{{ highlight }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 家居装饰内容 -->
        <div v-if="activeCategory === 'home'" class="home-content">
          <div class="section-header">
            <h2 class="section-title">🏠 家居装饰</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <div class="home-grid">
            <div 
              v-for="home in homeDecorIdeas" 
              :key="home.id"
              class="home-card"
              @click="viewHomeDecor(home)"
            >
              <div class="home-image-container">
                <img :src="home.image" alt="{{ home.title }}" class="home-image">
                <div class="home-style">{{ home.style }}</div>
              </div>
              <div class="home-info">
                <h3 class="home-title">{{ home.title }}</h3>
                <p class="home-description">{{ home.description }}</p>
                <div class="home-meta">
                  <span class="home-cost">{{ home.costLevel }}</span>
                  <span class="home-difficulty">{{ home.difficulty }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 健康养生内容 -->
        <div v-if="activeCategory === 'health'" class="health-content">
          <div class="section-header">
            <h2 class="section-title">💪 健康养生</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <div class="health-grid">
            <div 
              v-for="health in healthTips" 
              :key="health.id"
              class="health-card"
              @click="viewHealthTip(health)"
            >
              <div class="health-card-inner">
                <div class="health-icon">
                  <i :class="health.icon"></i>
                </div>
                <div class="health-info">
                  <h3 class="health-title">{{ health.title }}</h3>
                  <p class="health-description">{{ health.description }}</p>
                  <div class="health-benefits">
                    <span v-for="benefit in health.benefits" :key="benefit" class="health-benefit">{{ benefit }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LifeView',
  data() {
    return {
      // 生活分类
      lifeCategories: [
        { key: 'skills', name: '生活技巧', icon: 'fa-wrench' },
        { key: 'food', name: '美食推荐', icon: 'fa-cutlery' },
        { key: 'travel', name: '旅行攻略', icon: 'fa-suitcase' },
        { key: 'home', name: '家居装饰', icon: 'fa-home' },
        { key: 'health', name: '健康养生', icon: 'fa-heartbeat' },
      ],
      activeCategory: 'skills',
      
      // 精选内容
      featuredContents: [
        { id: 1, title: '10分钟快手早餐，开启元气满满的一天', image: '/src/assets/悟空.jpg', category: '美食', description: '忙碌的工作日，10分钟就能做出美味又营养的早餐，让你一整天都充满能量。包含5种简单易做的早餐食谱，适合不同口味的人群。', date: '2023-11-18', views: 2560000, likes: 189000 },
        { id: 2, title: '日式极简风格家居改造，让小空间变大两倍', image: '@/assets/二次元美食节海报_3.jpg', category: '家居', description: '学习日式收纳哲学，通过简单的家居改造，让你的小空间立刻变得宽敞明亮。无需花费大量金钱，只需一些巧妙的布置和收纳技巧。', date: '2023-11-16', views: 1890000, likes: 145000 },
        { id: 3, title: '周末微旅行：城市周边隐藏的绝美景点', image: '@/assets/科技数码展宣传图.jpg', category: '旅行', description: '不想远行但又想放松？这些城市周边的绝美景点值得一去。自驾1-2小时即可到达，适合周末休闲度假，体验不一样的自然风光。', date: '2023-11-14', views: 1650000, likes: 123000 },
      ],
      
      // 生活技巧
      lifeSkills: [
        { id: 11, title: '衣物收纳技巧，让衣柜整洁如新', icon: 'fa-archive', brief: '掌握这几个衣物收纳技巧，不仅能节省空间，还能让你的衣柜焕然一新。' },
        { id: 12, title: '厨房清洁小窍门，轻松去除顽固污渍', icon: 'fa-tint', brief: '厨房油污难清洁？这些小窍门让你轻松搞定各种顽固污渍，让厨房焕然一新。' },
        { id: 13, title: '省电小妙招，每月电费立省30%', icon: 'fa-bolt', brief: '简单易行的省电技巧，不仅环保还能帮你节省不少电费，从今天开始实施吧！' },
        { id: 14, title: '手机使用保养指南，延长使用寿命', icon: 'fa-mobile', brief: '这些手机保养小技巧能有效延长你的手机使用寿命，让你的手机持久如新。' },
        { id: 15, title: '快速去除异味的5个小方法', icon: 'fa-leaf', brief: '家里有异味怎么办？这些天然方法让你轻松去除各种异味，保持空气清新。' },
        { id: 16, title: '旅行打包技巧，轻松收纳所有物品', icon: 'fa-suitcase', brief: '学习这些打包技巧，让你的行李收纳更加高效，轻松装下所有旅行必需品。' },
      ],
      
      // 美食推荐
      foodRecommendations: [
        { id: 21, name: '三里屯创意川菜馆', image: '/src/assets/黑神话.jpeg', tags: ['川菜', '创意料理', '网红餐厅'], location: '北京三里屯', price: '人均150元', rating: 4.7, description: '融合传统川菜与现代料理技法，每一道菜都独具匠心，环境时尚优雅，是聚餐约会的绝佳选择。' },
        { id: 22, name: '老上海本帮菜馆', image: '/src/assets/悟空.jpg', tags: ['本帮菜', '老字号', '传统美食'], location: '上海南京路', price: '人均120元', rating: 4.8, description: '百年老字号，正宗上海本帮菜，红烧肉和清蒸鱼是必点菜品，环境古色古香，充满上海风情。' },
        { id: 23, name: '广式早茶点心店', image: '/src/assets/黑悟空.jpg', tags: ['粤菜', '早茶', '点心'], location: '广州北京路', price: '人均80元', rating: 4.6, description: '地道的广式早茶，虾饺、烧卖、肠粉等点心新鲜出炉，品种丰富，价格实惠，是体验广州饮食文化的好去处。' },
      ],
      
      // 旅行攻略
      travelGuides: [
        { id: 31, destination: '云南大理', image: '/src/assets/悟空.jpg', duration: '4天3晚', cost: '人均2500元', description: '风花雪月的大理，是文艺青年的向往之地。洱海骑行、古城漫步、苍山徒步，感受大理的悠闲时光。', highlights: ['洱海骑行', '大理古城', '苍山洱海', '白族风情'] },
        { id: 32, destination: '四川成都', image: '/src/assets/黑悟空.jpg', duration: '3天2晚', cost: '人均2000元', description: '美食之都成都，不仅有让人垂涎的川菜，还有可爱的大熊猫，以及悠闲的生活节奏。', highlights: ['宽窄巷子', '锦里古街', '大熊猫基地', '火锅美食'] },
        { id: 33, destination: '浙江杭州', image: '/src/assets/周杰伦.png', duration: '3天2晚', cost: '人均1800元', description: '人间天堂杭州，西湖美景令人陶醉，断桥残雪、平湖秋月等景点充满诗意，是休闲度假的好去处。', highlights: ['西湖游船', '灵隐寺', '龙井茶园', '河坊街'] },
      ],
      
      // 家居装饰
      homeDecorIdeas: [
        { id: 41, title: '北欧简约风客厅布置', image: '/src/assets/悟空.jpg', style: '北欧风', description: '简洁明快的北欧风格，通过中性色调和简约家具打造舒适宜居的客厅空间。', costLevel: '中等预算', difficulty: '简单' },
        { id: 42, title: '绿植点缀家居小技巧', image: '/src/assets/黑悟空.jpg', style: '自然风', description: '通过绿植点缀，让家居充满生机与活力，同时改善室内空气质量，营造健康居住环境。', costLevel: '低预算', difficulty: '简单' },
        { id: 43, title: '小户型多功能家具推荐', image: '/src/assets/周杰伦.png', style: '现代风', description: '针对小户型设计的多功能家具，一物多用，最大化利用有限空间，让小空间也能有大格局。', costLevel: '中等预算', difficulty: '中等' },
      ],
      
      // 健康养生
      healthTips: [
        { id: 51, title: '办公室人员的拉伸运动', icon: 'fa-child', description: '长时间久坐办公室，容易导致颈椎和腰椎问题，这些简单的拉伸运动可以有效缓解疲劳。', benefits: ['缓解颈椎压力', '改善血液循环', '预防职业病'] },
        { id: 52, title: '季节性养生饮食指南', icon: 'fa-cutlery', description: '根据不同季节调整饮食，顺应自然规律，达到健康养生的目的。四季养生各有侧重。', benefits: ['增强免疫力', '调节身体机能', '预防季节性疾病'] },
        { id: 53, title: '高质量睡眠养成计划', icon: 'fa-moon-o', description: '睡眠质量直接影响身体健康，通过调整作息时间和睡眠环境，培养良好的睡眠习惯。', benefits: ['提高睡眠质量', '增强记忆力', '改善情绪'] },
        { id: 54, title: '日常护眼小贴士', icon: 'fa-eye', description: '现代人长时间使用电子设备，眼睛容易疲劳，这些护眼技巧可以有效保护视力。', benefits: ['缓解视疲劳', '预防近视加深', '保护眼睛健康'] },
        { id: 55, title: '心理健康维护方法', icon: 'fa-smile-o', description: '关注心理健康同样重要，这些方法可以帮助你保持积极心态，应对生活压力。', benefits: ['减轻焦虑', '改善情绪', '增强心理韧性'] },
        { id: 56, title: '家庭健身计划', icon: 'fa-heartbeat', description: '无需去健身房，在家也能进行有效的健身运动，保持身体健康和良好体型。', benefits: ['增强体质', '保持身材', '提高免疫力'] },
      ],
    }
  },
  methods: {
    // 切换分类
    switchCategory(category) {
      this.activeCategory = category
    },
    
    // 查看精选内容
    viewContent(content) {
      console.log('查看精选内容:', content.title)
      // 实际应用中，这里应该跳转到内容详情页
      // this.$router.push(`/content/${content.id}`);
    },
    
    // 查看生活技巧
    viewSkill(skill) {
      console.log('查看生活技巧:', skill.title)
      // 实际应用中，这里应该跳转到技巧详情页
      // this.$router.push(`/skill/${skill.id}`);
    },
    
    // 查看美食推荐
    viewFood(food) {
      console.log('查看美食推荐:', food.name)
      // 实际应用中，这里应该跳转到美食详情页
      // this.$router.push(`/food/${food.id}`);
    },
    
    // 查看旅行攻略
    viewTravel(travel) {
      console.log('查看旅行攻略:', travel.destination)
      // 实际应用中，这里应该跳转到旅行详情页
      // this.$router.push(`/travel/${travel.id}`);
    },
    
    // 查看家居装饰
    viewHomeDecor(home) {
      console.log('查看家居装饰:', home.title)
      // 实际应用中，这里应该跳转到家居详情页
      // this.$router.push(`/home/${home.id}`);
    },
    
    // 查看健康养生
    viewHealthTip(health) {
      console.log('查看健康养生:', health.title)
      // 实际应用中，这里应该跳转到健康详情页
      // this.$router.push(`/health/${health.id}`);
    },
    
    // 格式化数字
    formatNumber(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    },
  },
}
</script>

<style scoped>
/* 生活页面整体样式 */
.life-view {
  min-height: 100vh;
  background-color: var(--bg-color);
}

/* 头部横幅样式 */
.life-header {
  position: relative;
  height: 400px;
  overflow: hidden;
  margin-bottom: 30px;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.header-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

.life-header:hover .header-image {
  transform: scale(1.1);
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
}

.header-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  text-align: center;
  color: white;
}

.header-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-subtitle {
  font-size: 18px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 主要内容区域 */
.life-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* 分类标签 */
.category-tabs {
  display: flex;
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  background: none;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.category-tab:hover {
  background-color: var(--hover-color);
  color: var(--primary-color);
}

.category-tab.active {
  background-color: var(--primary-color);
  color: white;
}

/* 精选内容区域 */
.featured-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.featured-item {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.featured-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.featured-item.primary {
  grid-row: span 2;
}

.featured-image-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
  overflow: hidden;
}

.featured-item.primary .featured-image-container {
  padding-top: 60%;
}

.featured-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.featured-item:hover .featured-image {
  transform: scale(1.05);
}

.featured-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--primary-color);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.featured-info {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.featured-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.featured-item.primary .featured-title {
  font-size: 24px;
}

.featured-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 auto 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.featured-item.primary .featured-description {
  font-size: 16px;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.featured-meta {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 15px;
  font-size: 13px;
  color: var(--text-secondary);
}

.featured-views,
.featured-likes {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 分类内容区域 */
.category-content {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 通用区域标题样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.section-more {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.3s ease;
}

.section-more:hover {
  color: var(--primary-color);
}

/* 生活技巧内容 */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.skill-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background-color: var(--hover-color);
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.skill-card:hover {
  background-color: var(--primary-color-light);
  transform: translateY(-3px);
}

.skill-icon {
  width: 50px;
  height: 50px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.skill-info {
  flex: 1;
}

.skill-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 10px 0;
}

.skill-brief {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 10px 0;
}

.skill-read-more {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.3s ease;
}

.skill-card:hover .skill-read-more {
  gap: 8px;
}

/* 美食推荐内容 */
.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

.food-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.food-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.food-image-container {
  position: relative;
  width: 100%;
  padding-top: 66.67%; /* 3:2 宽高比 */
  overflow: hidden;
}

.food-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.food-card:hover .food-image {
  transform: scale(1.05);
}

.food-tags {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.food-tag {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.food-info {
  padding: 20px;
}

.food-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 10px 0;
}

.food-meta {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: var(--text-secondary);
}

.food-location,
.food-price,
.food-rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.food-rating {
  color: #FFD700;
}

.food-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 旅行攻略内容 */
.travel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

.travel-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.travel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.travel-image-container {
  position: relative;
  width: 100%;
  padding-top: 66.67%; /* 3:2 宽高比 */
  overflow: hidden;
}

.travel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.travel-card:hover .travel-image {
  transform: scale(1.05);
}

.travel-info {
  padding: 20px;
}

.travel-destination {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 10px 0;
}

.travel-meta {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: var(--text-secondary);
}

.travel-duration,
.travel-cost {
  display: flex;
  align-items: center;
  gap: 4px;
}

.travel-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 15px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.travel-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.travel-highlight {
  background-color: var(--hover-color);
  color: var(--primary-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* 家居装饰内容 */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

.home-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.home-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.home-image-container {
  position: relative;
  width: 100%;
  padding-top: 66.67%; /* 3:2 宽高比 */
  overflow: hidden;
}

.home-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.home-card:hover .home-image {
  transform: scale(1.05);
}

.home-style {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background-color: var(--primary-color);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.home-info {
  padding: 20px;
}

.home-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 10px 0;
}

.home-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 15px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-meta {
  display: flex;
  gap: 15px;
  align-items: center;
  font-size: 14px;
}

.home-cost,
.home-difficulty {
  background-color: var(--hover-color);
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

/* 健康养生内容 */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.health-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.health-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.health-card-inner {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.health-icon {
  width: 60px;
  height: 60px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.health-info {
  flex: 1;
}

.health-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 10px 0;
}

.health-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 15px 0;
}

.health-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.health-benefit {
  background-color: var(--hover-color);
  color: var(--primary-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .featured-content {
    grid-template-columns: 1fr 1fr;
  }
  
  .featured-item.primary {
    grid-column: span 2;
  }
  
  .skills-grid,
  .food-grid,
  .travel-grid,
  .home-grid,
  .health-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .featured-content {
    grid-template-columns: 1fr;
  }
  
  .featured-item.primary {
    grid-column: span 1;
  }
  
  .category-tabs {
    flex-direction: column;
  }
  
  .category-tab {
    justify-content: center;
  }
  
  .health-card-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .header-title {
    font-size: 36px;
  }
  
  .header-subtitle {
    font-size: 16px;
  }
}
</style>